<template>
  <div class=''>
    <Category style="margin-bottom: 10px;" :disabled="STATUS"></Category>
    <el-card>
      <SpuList v-if="STATUS === 1" @changeStatus="STATUS = $event" @spuInfo="getSpuInfo"></SpuList>
      <SpuForm v-else-if="STATUS === 2" @changeStatus="STATUS = $event" :spuInfo="spuInfo" @spuInfo="getSpuInfo">
      </SpuForm>
      <SkuForm v-else-if="STATUS === 3" @changeStatus="STATUS = $event" :spuInfo="spuInfo" @spuInfo="getSpuInfo">
      </SkuForm>
    </el-card>
  </div>
</template>

<script>
import SkuForm from './components/skuForm'
import SpuForm from './components/spuForm'
import SpuList from './components/spuList'
export default {
  name: 'Spu',
  data() {
    return {
      STATUS: 1,
      spuInfo: this.initSpuInfo()
    }
  },
  components: {
    SkuForm,
    SpuForm,
    SpuList
  },
  methods: {
    // 初始化spuInfo
    initSpuInfo() {
      return {
        id: undefined,
        spuName: '',
        description: '',
        category3Id: undefined,
        tmId: undefined,
        spuSaleAttrList: [],
        spuImageList: []
      }
    },
    // 自定义事件的回调
    getSpuInfo(row) {
      if (row) {
        this.spuInfo = row
      } else {
        this.spuInfo = this.initSpuInfo()
      }
    }
  }

}
</script>

<style></style>